<breadcrumb></breadcrumb>

<mat-card>
  <mat-card-content>
    <section>
      <h2>Choose a date (e.g. choose your date of birth)</h2>
      <mat-form-field>
        <mat-label>Date of birth</mat-label>
        <input matInput
               [matDatepicker]="birthdayPicker"
               [(ngModel)]="birthday"
               #birthdayModel="ngModel"
               [max]="maxBirthday"
               required>
        <mat-datepicker-toggle matSuffix [for]="birthdayPicker"></mat-datepicker-toggle>
        <mat-datepicker #birthdayPicker startView="year"></mat-datepicker>
        <mat-error *ngIf="birthdayModel.hasError('required')">
          Please choose a date.
        </mat-error>
        <mat-error *ngIf="birthdayModel.hasError('matDatepickerMax')">
          Please choose an earlier date.
        </mat-error>
      </mat-form-field>
    </section>

    <section>
      <h2>Choose a date with touch UI (e.g. choose a payment date on mobile)</h2>
      <p>When would you like to schedule your payment?</p>
      <mat-form-field>
        <input matInput
               [matDatepicker]="paymentPicker"
               [(ngModel)]="paymentDate"
               #paymentDateModel="ngModel"
               [min]="minPaymentDate"
               required
               aria-label="Payment date">
        <mat-datepicker-toggle matSuffix [for]="paymentPicker"></mat-datepicker-toggle>
        <mat-datepicker #paymentPicker></mat-datepicker>
        <mat-error *ngIf="paymentDateModel.hasError('required')">
          Please choose a date.
        </mat-error>
        <mat-error *ngIf="paymentDateModel.hasError('matDatepickerMin')">
          Please choose a later date.
        </mat-error>
      </mat-form-field>
    </section>

    <section>
      <h2>Choose date with startAt, min and max (e.g. schedule a departing and returning flight)
      </h2>
      <mat-form-field>
        <mat-label>Departure date</mat-label>
        <input matInput
               [matDatepicker]="departPicker"
               [(ngModel)]="departDate"
               #departDateModel="ngModel"
               [min]="minTripDate"
               [max]="maxTripDate"
               required>
        <mat-datepicker-toggle matSuffix [for]="departPicker"></mat-datepicker-toggle>
        <mat-datepicker #departPicker [startAt]="startTripDate"></mat-datepicker>
        <mat-error *ngIf="departDateModel.hasError('required')">
          Please choose a date.
        </mat-error>
        <mat-error *ngIf="departDateModel.hasError('matDatepickerMin')">
          Please choose a later date.
        </mat-error>
        <mat-error *ngIf="departDateModel.hasError('matDatepickerMax')">
          Please choose an earlier date.
        </mat-error>
      </mat-form-field>
      <mat-form-field>
        <mat-label>Return date</mat-label>
        <input matInput
               [matDatepicker]="returnPicker"
               [(ngModel)]="returnDate"
               #returnDateModel="ngModel"
               [min]="departDate || minTripDate"
               [max]="maxTripDate">
        <mat-datepicker-toggle matSuffix [for]="returnPicker"></mat-datepicker-toggle>
        <mat-datepicker #returnPicker [startAt]="startTripDate"></mat-datepicker>
        <mat-error *ngIf="returnDateModel.hasError('matDatepickerMin') && !departDate">
          Please choose a later date.
        </mat-error>
        <mat-error *ngIf="returnDateModel.hasError('matDatepickerMin') && departDate">
          Please choose a date after your departure.
        </mat-error>
        <mat-error *ngIf="returnDateModel.hasError('matDatepickerMax')">
          Please choose an earlier date.
        </mat-error>
      </mat-form-field>
    </section>

    <section>
      <h2>Choose date with date filter (e.g. schedule a doctor's appointment)</h2>
      <mat-form-field>
        <mat-label>Appointment date</mat-label>
        <input matInput
               [matDatepicker]="appointmentPicker"
               [(ngModel)]="appointmentDate"
               #appointmentDateModel="ngModel"
               [min]="minAppointmentDate"
               [max]="maxAppointmentDate"
               [matDatepickerFilter]="weekdaysOnly"
               required>
        <mat-datepicker-toggle matSuffix [for]="appointmentPicker"></mat-datepicker-toggle>
        <mat-datepicker #appointmentPicker></mat-datepicker>
        <mat-error *ngIf="appointmentDateModel.hasError('required')">
          Please choose a date.
        </mat-error>
        <mat-error *ngIf="appointmentDateModel.hasError('matDatepickerMin') ||
                             appointmentDateModel.hasError('matDatepickerMax') ||
                             appointmentDateModel.hasError('matDatepickerFilter')">
          No appointments available on this date.
        </mat-error>
      </mat-form-field>
    </section>
  </mat-card-content>
</mat-card>
